Passing and Receiving Props
It’s time to introduce yet another fundamental React concept, which is props. And props is essentially how we pass data between components. And in particular, from parent components to child components. So we can imagine props as being like a communication channel between a parent and a child component.
So in practice, what we’re going to do, is to now customize each of these pizza components that we have right here. So, remember how we created the pizza component which has this image, the pizza name, and the ingredients. But right now all of the pizzas are the same because, well, we didn’t have a way of passing different data into them to make each of them customized. But now, as we learn about props, we will be able to do that. So, first of all, let’s grab our pizza component and cut it from here and place it right after the menu, just so we can see what’s happening. And then let’s get rid of this repetition here for now. So we only want this one pizza component here for now. Okay, and so now it’s time to pass the data from this parent component here, which is the menu in this case, to the pizza component. So what we want to pass is basically this string right here.So, the link to the image, then the name of the pizza, and the ingredients.
So to define props, we do it in two steps.
First, we pass the props into the component, and then second, we receive the props in the component that we pass them into.
So, here is where we pass those props in. And we write them just like this. So, just as if they were normal attributes. So, pizza spinaci. That’s the first one. Then, let’s also define a prop for the ingredient. And by the way, prop simply stands for property. It’s just a short for, yeah, property. Okay? And then finally, let’s say the photo or photo name. And then let’s grab this one here. All right. And maybe let’s also pass in a price. And for now, I will also pass it as a string but I will show you something in a minute. So for now, just write it like this. Give it a save; and then Prettier will format everything nicely like this. And now we need to go to the second step, which is to actually receive the props here inside the child component. So right now, of course, the component has no way of knowing that these four props have been passed in. So, the way we do that, is to accept a props parameter here in this component. And then for starters, let’s just lock this props to the console; and take a look at what’s happening. And, we already can see something here. So, this props is basically this object right here; and it has name, then pizza spinach, which is exactly this. So, what happened, as React included this pizza component, it basically called function in past in this props object. And this props object is made out of these four props that we passed into the component. And so now we can use this props object to replace all of these values here. Now, we need to take these values out of the object; and therefore, we need JavaScript, right? So here, this is no longer a string; but we need to enter JavaScript mode again.
So, props dot photo name is this one. And here, it is the name of the pizza. And again, we need JavaScript mode. So, props dot name. The same thing down here. So, props dot name. And finally, down here, we want props dot ingredients. Or actually, it’s ingredient. Let’s fix that here. Ingredients and ingredients down here. Okay. And of course, now everything still looks the same; because the data that we had here before, is exactly the data that we have here.
But now let’s actually make some magic happen. So, let’s create another pizza component; and then, this is where we will see why props are so useful. So let’s create a pizza funghi. Let’s give it some ingredients. So tomato, let’s say also mushrooms. And this is not important here. This is just to show you that we can now fully customize our components. Next, we can define the price. And notice that I’m doing it now in a different order. So here I had first a photo name and the price. And this is just to show you that the order in which we pass in the props is completely irrelevant. So, photo name is pizzas slash funghi dot jpg. Okay? And now we need to immediately close this component just like before. And as I save it, watch what happened here. And there is our second pizza component now with completely different data.
And so now for the first time, we have reused a component and configured it in a way that makes each component unique and display their own data. Okay? And now let’s just improve this pizza component here a little bit. So for starters, in our CSS, we actually have a class name here. So a class name called pizza. Okay? And then let’s also place these two here, inside their own div, so that this data can be displayed at the site of the image. So just like here in our original. So this is what we’re going for. So here we have a div, and then again, I’m using that trick where I simply push down that line. And this is already looking a lot nicer. Let’s just finally also add the price here and I’m doing that as a span. So props dot price. And there it is. But now let’s say that we wanted for some reason to add a number here. So we wanted to increase all the prices by three, let’s say. But watch what happens when we try this. So all the prices plus three.
So, what happens, is that React, or JavaScript, basically simply added the three here to the end of this number. And the reason for that is that here we pass these numbers actually in as a string. And we can see that also here in this output. So we do not want a string here.Instead, we want a number. And so the way we can achieve that is by entering again, JavaScript mode. And so in JavaScript, this is now an actual number.And so watch what happens.